<template slot-scope="scope">
  <div class="device-list">
    <div class="device-list-tab">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        :header-cell-style="{
          background: '#ffffff',
          textAlign: 'left',
          color: '#101010',
          padding: '3px',
          fontSize: '15px',
          fontWeight: '900',
        }"
        :row-style="{ height: '35px' }"
      >
        <el-table-column label="被投诉时间" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="投诉状态"
          align="left"
          show-overflow-tooltip
          width="150"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status == '1'" style="color: #3492f8"
              >完成</span
            >
            <span v-if="scope.row.status == '2'" style="color: #e99d42"
              >解决中</span
            >
            <span v-if="scope.row.status == '3'" style="color: #bd3124"
              >待确认</span
            >
            <span v-if="scope.row.status == '4'" style="color: #898989"
              >撤销
            </span>
          </template>
        </el-table-column>
        <el-table-column label="投诉结果" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.status == '4'" style="color: #898989"
              >撤销
            </span>
            <span v-else style="color: #3492f8" @click="handelView"
              >查看处理结果
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="left" width="300">
          <template slot-scope="scope">
            <span
              v-if="scope.row.status != '4'"
              class="table-p"
              @click="handleEdit(scope.$index, scope.row, 1)"
              >查看申诉内容</span
            >

            <span
              v-if="scope.row.status == '2' || scope.row.status == '3'"
              class="table-p"
              @click="handleEdit(scope.$index, scope.row, 3)"
              >申诉</span
            >
            <span
              v-if="scope.row.status == '3'"
              class="table-p"
              @click="handleEdit(scope.$index, scope.row, 4)"
              >确认处理结果</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <ticketDialog
      :dialogVisible="dialogVisible"
      @handleClose="handleClose"
      @handleUnderstand="handleUnderstand"
    ></ticketDialog>
    <LawsuitTable
      :dialogLawsuit="dialogLawsuit"
      :title="title"
      @handleClose="handleClose"
      @handleUnderstand="handleUnderstand"
    ></LawsuitTable>
    <twiceTable
      :dialogLawsuit="dialogLawsuit"
      @handleClose="handleClose"
      @handleUnderstand="handleUnderstand"
    ></twiceTable>
    <ContentDi
      :dialogContent="dialogContent"
      @handleClose="handleClose"
      @handleUnderstand="handleUnderstand"
      :topName="topName"
    ></ContentDi>
  </div>
</template>

<script>
import ticketDialog from "./ticketDialog.vue";
import LawsuitTable from "./LawsuitDialog.vue";
import twiceTable from "./twiceTable.vue";
import ContentDi from "./ContentDi.vue";
export default {
  props: {
    // deviceList: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   },
    // },
    tableData: {},
    select: {},
  },
  components: { ticketDialog, LawsuitTable, twiceTable, ContentDi },
  data() {
    return {
      dialogVisible: false, // 查看处理结果弹窗
      dialogLawsuit: false, // 申诉/投诉弹窗
      title: "内容补充",
      dialogContent: false, // 查看申诉/投诉内容
      topName: "申诉内容",
    };
  },
  computed: {},
  created() {},
  methods: {
    // 查看处理结果
    handelView() {
      this.dialogVisible = true;
    },
    //关闭弹窗
    handleClose(val) {
      if (val == 1) {
        this.dialogVisible = !this.dialogVisible;
      } else if (val == 2) {
        this.dialogLawsuit = !this.dialogLawsuit;
      } else if (val == 3) {
        this.dialogTwice = !this.dialogTwice;
      } else if (val == 4) {
        this.dialogContent = !this.dialogContent;
      }
    },
    // 弹窗确认
    handleUnderstand(val) {
      if (val == 1) {
        this.dialogVisible = !this.dialogVisible;
      } else if (val == 2) {
        this.dialogLawsuit = !this.dialogLawsuit;
      } else if (val == 3) {
        this.dialogTwice = !this.dialogTwice;
      } else if (val == 4) {
        this.dialogContent = !this.dialogContent;
      }
    },

    // 操作
    handleEdit(index, row, num) {
      //   this.dialogVisible = true;
      if (num == 4) {
        this.dialogVisible = true;
      } else if (num == 3) {
        this.dialogLawsuit = true;
      } else if (num == 1) {
        this.dialogContent = true;
      }
    },

    //表格颜色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else if (rowIndex % 2 == 1) {
        return "success-row";
      }
      return "success-row";
    },
  },
};
</script>

<style scoped lang="less">
/deep/.cell {
}
.table-p {
  display: inline-block;
  width: 80px;
  height: 26px;
  border-radius: 5px;
  background-color: #3894ff;
  text-align: center;
  color: #ffffff;
  line-height: 26px;
  font-size: 12px;
  margin-left: 10px;
}
.table-p:nth-child(1) {
  margin-left: 00px;
}
/deep/th {
  border-bottom: 1px solid gray !important;
  max-height: 35px !important;
}
/deep/ td {
  border-bottom: 1px solid gray !important;
  max-height: 35px !important;
}
.device-list-tab {
  border: 1px solid gray;
}
/deep/.el-table__empty-block,
/deep/.el-table tr,
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  // background-color: #135b7a;
  height: 46px;
  color: #101010;
  font-weight: 600;
}
/deep/.el-table .warning-row td {
  background: #e9f3ff !important;
  height: 35px;
  // color: #fff;
  font-weight: 600;
}

::v-deep .el-table .warning-row td {
  background: #e9f3ff !important;
}
</style>
